<template>
  <div class="gdldzs">
    <div id="echartsGdldzs" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      echartsGdldzs: null,
      colors: ['#a0a7e6', '#ffb980'],
      option: {
        grid: {
          top: '5%',
          left: '1%',
          right: '6%',
          bottom: '1%',
          containLabel: true
        },
        title: {
          text: '领导职数情况',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let newParams = []
            newParams = [...params]
            const tooltipString = [newParams[0].name + '<br>']
            newParams.sort((a, b) => {
              return b.value - a.value
            })
            newParams.forEach((p) => {
              const cont =
                p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>'
              tooltipString.push(cont)
            })

            return tooltipString.join('')
          }
        },
        xAxis: {
          // type: 'value',
          // boundaryGap: [0, 0.01],
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        yAxis: {
          type: 'category',
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            color: 'black',
            fontSize: 14,
            textStyle: {
              color: '#fff'
            }
          },
          data: [
            '自治区直属',
            '南宁市',
            '柳州市',
            '桂林市',
            '梧州市',
            '北海市',
            '防城港市',
            '钦州市',
            '贵港市',
            '玉林市',
            '百色市',
            '贺州市',
            '河池市',
            '来宾市',
            '崇左市'
          ],
          // max: 0, // 关键：设置y刻度最大值，相当于设置总体行高
          inverse: true
        },
        series: [
          {
            name: '核定',
            type: 'bar',
            realtimeSort: true,
            itemStyle: {
              barBorderRadius: 10
            },
            label: {
              show: true,
              position: 'right',
              color: '#fff'
            },
            data: [
              18516, 17562, 16425, 25146, 23156, 25648, 24515, 12485, 17254,
              13524, 12121, 13213, 21236, 31251, 25252
            ]
          },
          {
            name: '实配',
            type: 'bar',
            itemStyle: {
              barBorderRadius: 10
            },
            label: {
              show: true,
              position: 'right',
              color: '#fff'
            },
            data: [
              18000, 17000, 16000, 25000, 23000, 24958, 24000, 12000, 17000,
              13000, 12000, 13000, 21000, 31000, 25000
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.initEchartsGdldzs()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    initEchartsGdldzs() {
      const chartDom = document.getElementById('echartsGdldzs')
      this.echartsGdldzs = this.$echarts.init(chartDom)
      this.echartsGdldzs.setOption(this.option)
      // this.echartsGdldzs.on('click', (params) => {
      //   console.log(params)
      //   this.$emit('handleOpen5', params)
      // })
      //响应式变化
      window.addEventListener(
        'resize',
        () => this.echartsGdldzs.resize(),
        false
      )
    }
  }
}
</script>

<style lang='scss'>
.gdldzs {
  width: 25%;
  height: 57%;
  position: fixed;
  left: 5px;
  bottom: 5px;
  // background: rgba(0, 18, 67, 0.4);

  #echartsGdldzs {
    width: 100%;
    height: 100%;
  }
}
</style>
